<template>
  <div>
    <div id="title">
      <h1 style="text-align: center; margin-top: 10px">我的题库</h1>
    </div>
    <br /><br />
    <Row>
      <Col span="24">
        <div>
          <Button @click="createQues" style="margin-left: 75%" type="primary"
            >创建问卷</Button
          >
          <!-- <el-button @click="createQues" type="primary" size:medium>创建问卷</el-button> -->
          <Button
            @click="exportQuestionBank = true"
            style="margin-left: 80%; margin-top: -52px"
            type="primary"
            >导入题库</Button
          >
        </div>
      </Col>
    </Row>
    <Row>
      <Col span="18" offset="3">
        <div style="height: 600px; overflow: auto">
          <h2>题库列表</h2>
          <div v-for="(item, index) in questionBank" :key="index.id" :padding="3">
            <Card style="margin: 5px">
              <!-- <Button type="default" @click="answerPage">预览</Button> -->
              <!-- <div
                    v-for="(item, index) in questionCreated"
                    :key="index.questionId"
                    :padding="3" 
                    > -->
              <div>
                <span
                  style="padding: 5px; cursor: pointer"
                  @click="editQuestionBank(index, questionBank)"
                >
                  <strong style="color: #57a3f3" class="name" :title="item.name">{{
                    item.name
                  }}</strong>
                </span>

                <div style="float: right">
                  <template>
                    <span
                      style="
                        margin-left: 5px;
                        margin-right: 3px;
                        cursor: pointer;
                        color: gray;
                      "
                      title="Delete"
                      @click="deleteQuestionBank(index, questionBank)"
                    >
                      <Icon type="ios-trash" :size="20" color="gray" />
                    </span>
                    <span
                      style="
                        margin-left: 5px;
                        margin-right: 3px;
                        cursor: pointer;
                        color: gray;
                      "
                      title=" Preview"
                      @click="viewQuestions(index, questionBank)"
                    >
                      <Icon type="ios-eye" :size="20" color="gray" />
                    </span>

                    <span
                      style="
                        margin-left: 5px;
                        margin-right: 3px;
                        cursor: pointer;
                        color: gray;
                      "
                      title="Download"
                      @click="questionDownload(index, questionBank)"
                    >
                      <Icon type="ios-cloud-download-outline" :size="20" color="gray" />
                    </span>
                  </template>
                </div>
                <p style="word-break: break-word; padding: 5px; cursor: pointer">
                  {{ item.references }}
                </p>
              </div>
            </Card>
          </div>
        </div>
      </Col>
    </Row>
    <Modal v-model="exportQuestionBank" title="导入题库">
      <Input
        v-model="emailInfo.fileName"
        placeholder="请上传题库excel"
        style="width: 100%"
        v-if="emailInfo.type == 'excel'"
        :readonly="emailInfo.type == 'excel' ? true : false"
      />
      <Upload
        :disabled="emailInfo.type != 'excel'"
        type="select"
        :before-upload="gatherFile"
        action="/visualResourceLibrary/questionnaire/excelQuesBank/add"
      >
        <Button :disabled="emailInfo.type != 'excel'">上传</Button>
      </Upload>
      <div slot="footer" style="display: inline-block">
        <i-button
          type="primary"
          @click="addQuestionBankFromExcel('emailInfo')"
          style="float: right"
          >确认</i-button
        >
        <i-button style="float: right; margin-right: 15px">取消</i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { get, post, del, put } from "@/axios";
export default {
  data() {
    return {
      userId: "123456",
      questionBankId: "",
      exportQuestionBank: false,
      emailInfo: {
        type: "excel",
        file: null,
        fileName: "",
        userIds: "",
      },

      questionBank: [],
      //   tableColumns:[
      //     {
      //         type: 'selection',
      //         width: 60,
      //         align: 'center'
      //     },
      //     {
      //         title: '题目信息',
      //         key: 'stem'
      //     },
      //     {
      //         title: '题目类型',
      //         key: 'type'
      //     },
      //     {
      //         title: '创建时间',
      //         key: 'createTime',
      //         render: (h, params) => {
      //         let time = this.$moment(params.row.time).format('YYYY-MM-DD HH:mm:ss')
      //         return h('span', time);
      //         }
      //     },
      //     {
      //         title: '操作',
      //         key: 'action',
      //         fixed: 'right',
      //         width: 240,

      //         render: (h, params) => {
      //             return h('div', [
      //                 h('Button', {
      //                     props: {
      //                         type: 'primary',
      //                         size: 'small'
      //                     },
      //                     style: {
      //                         marginRight: '5px'
      //                     },
      //                     on: {
      //                         click: () => {
      //                             console.log('我触发了')
      //                         }
      //                     }
      //                 }, '编辑')
      //             ]);

      //         }
      //       }

      // ],
    };
  },
  mounted() {
    this.browseQuestionBank();
  },
  methods: {
    createQues() {
      this.$router.push("/classTests");
    },
    async deleteQuestionBank(index, questionBank) {
      this.questionBankId = questionBank[index].id;
     // console.log(this.questionBankId);
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/quesBank/del/" + this.questionBankId
        );
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    viewQuestions(index, questionBank) {
      this.questionBankId = this.questionBank[index].id;
      this.$router.push({
        path: "/questionBankDetail",
        query: { value: this.questionBankId },
      });
    },

    gatherFile(file) {
      this.emailInfo.file = file;
      // console.log(this.userId);
     // console.log(this.emailInfo.file);
      this.emailInfo.fileName = file.name;
      // console.log(file);
      return false;
    },
    async browseQuestionBank() {
      let page = 0;
      let size = 100;
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/quesBank/" + page + "/" + size
        );
        //console.log(res.data.data);
        this.questionBank = res.data.data.content;
        //console.log(this.questionBank);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async addQuestionBankFromExcel(name) {
      let formData = new FormData();
      formData.append("file", this.emailInfo.file); // file为上传的文件
      //console.log(this.emailInfo.file);
      formData.append("type", this.emailInfo.type);
      //console.log(formData);
      try {
        let res = await post(
          "/visualResourceLibrary/questionnaire/excelQuesBank/add",
          formData
        );

        // console.log(res);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
  },
};
</script>

<style>
.right-align {
  float: right;
}
</style>
